<template>
  <section class="w-full bg-bg-color text-white text-xs lg:pb-[100px]">
    <CommonHead />
    <div class="overflow-hidden mt-small lg:mt-big px-3.5 box-border relative">
      <!-- 背景图 -->
      <YImage
        class="lg:hidden w-full h-[189px] absolute top-0 left-0"
        src="home-imgs/pc-discount/exclusive_banner@2x.png"
        placeholder
        width="375px"
        height="189px" />
      <YImage
        class="w-full h-[388px] hidden lg:block absolute top-0 left-0 z-10"
        src="home-imgs/pc-discount/pc_exclusive_banner2.png"
        placeholder
        width="1398px"
        height="388px" />
      <div class="w-full lg:w-100 lg:mx-auto">
        <!-- title -->
        <div class="flex items-center justify-between relative z-50">
          <div class="lg:flex lg:flex-col items-center justify-center lg:mx-auto">
            <h1 class="lg:hidden text-2xl mt-8 font-black">{{ $mt('EXCLUSIVE OFFERS') }}</h1>
            <YImage
              class="hidden lg:block mt-14 mb-1.5 w-[478px] h-[86px]"
              src="home-imgs/pc-discount/pc_exclusive_text.png"
              placeholder
              width="473px"
              height="86px" />
            <p
              class="text-xs lg:text-2xl lg:leading-9 leading-4 mt-2 lg:mt-0 text-[#d5d6d5] lg:text-white lg:w-[473px] lg:text-center mb-8 lg:mb-16">
              {{ $mt(" Don't miss our limited-time offers! Discover current deals today!") }}
            </p>
          </div>
          <WImage
            class="lg:mt-8 lg:hidden mx-auto h-[85px] w-[83px] object-bottom object-contain"
            :src="useAsset('discount/exclusive_banner_pic@2x.png')"
            width="83"
            height="85" />
        </div>
        <!--    商品部分-->
        <div
          v-if="discountGoodsList.length"
          class="relative z-50 mb-8 px-4 w-full grid grid-cols-1 gap-y-8 lg:grid-cols-5 lg:mx-auto">
          <div class="shrink-0 rounded-2xl lg:mr-10" v-for="(item, index) in discountGoodsList" :key="index">
            <DiscountItem
              class="lg:hidden"
              :discount-goods-info="item"
              :colorBg="colorList[index % colorList.length]"
              :isDetail="true" />
            <PcDiscountItem
              class="hidden lg:flex flex-col justify-between shrink-0 w-[220px]"
              :discount-goods-info="item"
              :colorBg="colorList[index % colorList.length]"
              :isDetail="true" />
          </div>
        </div>
        <van-empty v-else image="/v2/home-imgs/empty2.png" description="noting here" class="mx-auto" />
      </div>
    </div>
  </section>
  <NewHomeFoot />
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import CommonHead from '~/components/basis/CommonHead.vue'
import NewHomeFoot from '~/components/home/NewHomeFoot.vue'
import { useHomeStore } from '~/store/home'
import DiscountItem from '~/components/home/DiscountItem.vue'
import WImage from '~/components/logic/WImage.vue'
import PcDiscountItem from '~/components/discount/PcDiscountItem.vue'

definePageMeta({
  layout: 'plain',
})
const colorList = ['#452F52', '#253338', '#22264F', '#293825', '#413326', '#232C12', '#413326', '#163141']
const homeStore = useHomeStore()
const { discountGoodsList } = storeToRefs(homeStore)
// 服务端渲染的数据
await useLazyAsyncData(
  async () => {
    await homeStore.initDisCountList()
    return 1
  },
  { default: () => [] as any },
)
const { $mt } = useCommonPlugin()
const seoTitle = `BitTopup - ${$mt('Exclusive Discounts & Deals - Save Big on Top Brands Today')}`
const seoDescription = $mt(
  'Shop now and save big with our exclusive discounts on top brands! Explore a wide range of products at unbeatable prices. Limited-time offers on tech, fashion, and more.',
)
useSeoMeta({
  title: seoTitle,
  ogTitle: seoTitle,
  description: seoDescription,
  ogDescription: seoDescription,
  ogImage: 'https://bittopup.com/logo.png',
  twitterCard: 'summary_large_image',
})
</script>

<style scoped lang="scss">
// .home-bg {
//   background: url(assets/images/discount/exclusive_banner@2x.png) no-repeat;
//   background-position: top;
//   background-size: 100%, 189px;
// }
// .pc-bg {
//   background: url(public/v2/home-imgs/pc-discount/pc_exclusive_banner.png) no-repeat;
//   background-position: top;
//   background-size: 100%, 388px;
// }
</style>
